<template>
	<view class="container">
	    <view class="info">
	      <image :src="FormData.img"></image>
	
	      <view>{{ FormData.name }}</view>
	      <view>数量：{{ FormData.num }}</view>
	      <view>{{ FormData.remark }}</view>
		  <uni-forms ref="valiForm" :rules="rules" :modelValue="RecordData">
		  	
		  	<uni-forms-item label="需要出库数量" required name="outnum">
		  		<uni-easyinput v-model="RecordData.outnum" placeholder="请输入出库数量" />
		  	</uni-forms-item>
		  	<uni-forms-item label="出库备注" name="beizhu">
		  		<uni-easyinput type="textarea" v-model="RecordData.beizhu" placeholder="请输入备注" />
		  	</uni-forms-item>
		  	
		  </uni-forms>
		  <button type="primary" @click="submit('valiForm')">出库</button>
	    </view>
	  </view>
</template>

<script>
	export default {
		data() {
			return {
				FormData: {
					name: 'uniapp',
					num: 1,
					remark: '无！',
					img: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
				},
				RecordData: {
					outnum: 0,
					beizhu: ''
				},
				goodId: '',
				rules: {
					num: {
						rules: [{
							required: true,
							errorMessage: '数量不能为空'
						}, {
							format: 'number',
							errorMessage: '数量只能输入数字'
						}]
					}
				},
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
				console.log(option.id); //打印出上个页面传递的参数。
				this.goodId = option.id
				this.getById()
		},
		methods: {
			submit(ref) {
			  this.$refs[ref].validate().then(res => {
			    console.log('success', res);
			    if (res) {
			      this.outCK(); // 传递表单数据对象作为参数
			    } else {
			      console.log('表单验证失败');
			    }
			  }).catch(err => {
			    console.log('err', err);
			  });
			},
			// 查询SQL语句
			getById(){
				let that = this; // 备份 Vue 实例
				const id = that.goodId
				const sql = `select  * from goods where id = ('${id}')`;
				plus.sqlite.selectSql({
					name: 'CangKu',
					sql: sql,
					success: function(data){
						console.log('selectSql success: ');
						for(var i in data){
							console.log(data[i]);
						};
						that.FormData = data[0];
						console.log("===============表单数据：",that.FormData);
						// return uni.showToast({
						// 	title:'查询成功！!',
						// 	icon:'success'
						// })
						
					},
					fail: function(e){
						console.log('selectSql failed: '+JSON.stringify(e));
					}
				});
			},
			// 事务
			transBegin(){
				plus.sqlite.transaction({
					name: 'CangKu',
					operation: 'begin',
					success: function(e){
						console.log('transaction begin success!');
					},
					fail: function(e){
						console.log('transaction begin failed: '+JSON.stringify(e));
					}
				});
			},
			transCommit(){
				plus.sqlite.transaction({
					name: 'CangKu',
					operation: 'commit',
					success: function(e){
						console.log('transaction commit success!');
					},
					fail: function(e){
						console.log('transaction commit failed: '+JSON.stringify(e));
					}
				});
			},
			// 出库操作
			outCK(){
				let that = this; // 备份 Vue 实例
				const outnum = that.RecordData.outnum;
				const updateNum = that.FormData.num - outnum;
				if(updateNum < 0 ){
					return uni.showToast({
						title:'数量不足!',
						icon:'error'
					})
				};
				that.transBegin();
				const id = that.goodId;
				const name = that.FormData.name;
				const beizhu = that.RecordData.beizhu;
				const sql = `UPDATE goods SET num =(${updateNum}) WHERE id = ('${id}')`;				
				plus.sqlite.executeSql({
					name: 'CangKu',
					sql: sql,
					success: function(e){
						console.log('outCk success!');
						that.getById();
						return uni.showToast({
							title:'出库成功！!',
							icon:'success'
						})
					},
					fail: function(e){
						console.log('outCk failed: '+JSON.stringify(e));
					}
				});
				const sqlRecord = `INSERT INTO record (name, num, remark,type) VALUES ('${name}', '${outnum}', '${beizhu}','出库')`
				plus.sqlite.executeSql({
					name: 'CangKu',
					sql: sqlRecord,
					success: function(e){
						console.log('insertRecord success!');
					},
					fail: function(e){
						console.log('insertRecord failed: '+JSON.stringify(e));
					}
				});
				this.transCommit()
			},
		}
	}
</script>

<style>
.container {
  display: flex;
  justify-content: center; /* 设置水平居中 */
  height: 100vh; /* 设置容器高度，使其充满整个屏幕 */
}

.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
</style>
